<template>
  <div>
    <el-container>
      <el-header class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>数据应用</el-breadcrumb-item>
            <!--原  <el-breadcrumb-item class="breadcrumbColor">车辆进出台账</el-breadcrumb-item>-->
            <el-breadcrumb-item class="breadcrumbColor">后端执行日志</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main>
        <div class="inside-main-box">
          <el-row class="inside-main" style="height: 36px">
            <el-col :span="5" style="margin-left: 20px">
              <el-form-item label="出入时间" size="small">
                <el-date-picker clearable v-model="form.startDateTime" type="date" placeholder="选择时间" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <span>-</span>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="" size="small">
                <el-date-picker clearable v-model="form.endDateTime" type="date" placeholder="选择时间" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="车牌号" size="small">
                <el-input clearable v-model="form.cl_cph" maxLength="8" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="排放阶段" size="small">
                <el-select clearable v-model="form.vehicleEmissions" placeholder="请选择">
                  <el-option label="国0" value="国0" />
                  <el-option label="国Ⅰ" value="国Ⅰ" />
                  <el-option label="国Ⅱ" value="国Ⅱ" />
                  <el-option label="国Ⅲ" value="国Ⅲ" />
                  <el-option label="国Ⅳ" value="国Ⅳ" />
                  <el-option label="国Ⅴ" value="国Ⅴ" />
                  <el-option label="国Ⅵ" value="国Ⅵ" />
                  <el-option label="新能源" value="新能源" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="出入类型" size="small">
                <el-select clearable v-model="form.typeOfAcces" placeholder="请选择">
                  <el-option label="入厂" value="入厂" />
                  <el-option label="出厂" value="出厂" />
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>
      <el-row style="height: 36px">
        <el-col :span="4" v-if="factory_id==0" style="margin-left: 20px">
          <el-form-item label="所属工厂"  size="small">
<!--            <el-select clearable v-model="form.factory_id" placeholder="请选择">-->
<!--              <el-option label="铁西工厂" value="1" />-->
<!--              <el-option label="大东工厂" value="2" />-->
<!--              <el-option label="里达工厂" value="3" />-->
<!--              <el-option label="动力总成工厂" value="4" />-->
<!--            </el-select>-->
            <el-select v-model="form.factory_id" placeholder="请选择工厂" clearable>
              <el-option v-for="fa in factory.factorys" :label="fa.factory_name" :key="fa.id" :value="fa.id" />
            </el-select>
          </el-form-item>
        </el-col>
            <el-col :span="8" style="margin-left: 20px">
              <el-button size="small" class="sele-but" icon="search" @click="selectQuery()" >查询</el-button>
              <el-button size="small" class="empty-but" icon="refresh" @click="onReset">重置</el-button>
              <el-button size="small" class="empty-but" icon="download" @click="exportExcelData(form)">导出</el-button>
            </el-col>
          </el-row>
        </div>
         <div style="height: 10px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
         </div>
        <div style="background: #fff">
          <el-table :data="tableData" style="width: 100%;" height="460">
            <el-table-column align="center" type="index" label="序号" width="80"/>
            <el-table-column align="center" prop="factory_id" label="工厂"  width="90" show-overflow-tooltip>
              <template #default="item">
                <span v-if="item.row.factory_id">{{factory.factoryNames[item.row.factory_id]?.factory_name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="filingStatus" label="状态"  show-overflow-tooltip>
              <template #default="scope">
                <span v-if="scope.row.filingStatus == 1">已备案</span>
                <span v-if="scope.row.filingStatus == 0">未备案</span>
             </template>
            </el-table-column>
            <el-table-column align="center" prop="typeOfAcces" label="出入类型" show-overflow-tooltip/>
            <!--<el-table-column align="center" prop="filing_happens" label="通行车辆类型" width="180px" show-overflow-tooltip>
              <template #default="scope">
                <span v-if="scope.row.filing_happens == 1">备案</span>
                <span v-if="scope.row.filing_happens == 0">临时</span>
             </template>
            </el-table-column>
            <el-table-column align="center" prop="standard" label="是否达标"  show-overflow-tooltip>
            <template #default="scope">
                <span v-if="scope.row.standard == 1">已达标</span>
                <span v-if="scope.row.standard == 0">未达标</span>
            </template>
            </el-table-column>-->
            <el-table-column align="center" prop="openingwhether" label="是否开闸"  show-overflow-tooltip>
            <template #default="scope">
                <span v-if="scope.row.openingwhether == 1">是</span>
                <span v-if="scope.row.openingwhether == 0">否</span>
            </template>
            </el-table-column>
            <el-table-column align="center" prop="gateno" label="道闸编号" width="160px" show-overflow-tooltip/>
            <el-table-column align="center" prop="accessTime" label="出入时间" width="160px" show-overflow-tooltip
              :formatter="function(row,column){ if(row.accessTime){ return $moment(row.accessTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" prop="cl_cph" label="车牌" show-overflow-tooltip/>
            <el-table-column align="center" prop="licensePlateColor" label="车牌颜色" show-overflow-tooltip/>
            <el-table-column align="center" prop="vehicleEmissions" label="排放阶段"  show-overflow-tooltip/>
            <el-table-column align="center" prop="sj_name" label="司机"  show-overflow-tooltip/>
            <el-table-column align="center" prop="sj_phone" label="司机电话" show-overflow-tooltip/>
            <el-table-column align="center" prop="applicationTime" label="申请时间" width="160px" show-overflow-tooltip
              :formatter="function(row,column){ if(row.applicationTime){ return $moment(row.applicationTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <!--<el-table-column align="center" prop="viewvideo" label="查看视频" >
              <template #default="item">
                <el-button link type="primary" size="small" @click="lookup(item.row)">查看视频</el-button>
              </template>
            </el-table-column>-->
            <el-table-column align="center" prop="viewphotos" label="查看照片">
              <template #default="scope">
                <el-button type="primary" size="small"  v-if="scope.row.viewphotos==null" link >未上传</el-button>
                <el-button  v-else  type="primary" size="small" link @click="vehiclelist(scope.row)">查看图片</el-button>
              </template>
          </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button link type="primary" size="small" icon="view" @click="detailPage(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="margin-right:40px; display: flex; justify-content: flex-end"  v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"
           size="small"  layout="prev, pager, next, jumper,total"
           :total="queryInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </el-main>
      <!--查看视频弹窗-->
      <el-dialog center v-model="videoDialog" title="查看视频" width="30%">
          <video :src="videos" style="width: 100%;height: 200px;" autoplay controls loop muted>
          </video>
          <template #footer>
                <span class="dialog-footer">
                    <el-button @click="videoDialog = false">关闭</el-button>
                </span>
            </template>
            </el-dialog>
<!--      :src="require('D:\\kq-environment-protection\\images\\2c256f6e-0e9e-40ec-af7c-53dde87903f2.jpg')"-->
        <el-dialog v-model="vehiclePhotoDia"  center>
          <div class="photoDiv" >
           <img class="photoImg" :src="Image.viewphotos" alt=""/></div>
        </el-dialog>
    </el-container>
  </div>
</template>
<script>
import { reactive, ref,onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
// 路由
import { useRouter } from "vue-router";
import { selectAllBook, selectQueryBook } from "@/api/mobilePollution";
import * as XLSX from "xlsx";
import { vehicleAccListOut } from "@/api/leadingOut"
import first from "@/assets/video/0.mp4";
import second from "@/assets/video/1.mp4";
import third from "@/assets/video/2.mp4";
import moment from "moment";
import {ElMessage, ElMessageBox} from "element-plus";
import {getFactoryInfo} from "../../../api/factory";
import { v3ImgPreviewFn } from "v3-img-preview";
export default {
  setup() {
    let factory_id = localStorage.getItem("factoryId");
    onMounted(()=>{
      localStorage.removeItem("userObj");
      selectQuery()
      getFactorys();
    })
    //分页
    const queryInfo = reactive({
      pagenum:1,
      pagesize:10,
      total:0
    })
    const handleSizeChange = (val) => {
      queryInfo.pagesize = val
      selectQuery()
    }
//点击第几页
    const handleCurrentChange = (val) => {
      queryInfo.pagenum = val
      selectQuery()
    }
    const router = useRouter();
    // 跳转到详情页面
    const detailPage = (row) => {
      localStorage.setItem("userObj", JSON.stringify(row));
      router.push({
        path: "standingBookDetail",
        query: "",
      });
    };


    //查所有
    const select = () => {
      selectQueryBook({pageNum:queryInfo.pagenum,pageSize:queryInfo.pagesize}).then((res) => {
        tableData.value = res.data.list
        queryInfo.total=res.data.total;
      });
    };
    //根据条件查询
    const selectQuery = () => {
      if (form.startDateTime){
        let startDate = moment(form.startDateTime).format('YYYY-MM-DD')
        form.startDateTime =  startDate
      }
      if (form.endDateTime){
        let endtDate = moment(form.endDateTime).format('YYYY-MM-DD')
        form.endDateTime =  endtDate
      }
      if (form.startTime){
        let startTime = moment(form.startTime).format('YYYY-MM-DD')
        form.startTime =  startTime
      }
      if (form.endTime){
        let endTime = moment(form.endTime).format('YYYY-MM-DD')
        form.endTime =  endTime
      }
      form.pageSize = queryInfo.pagesize
      form.pageNum = queryInfo.pagenum
      selectQueryBook(form).then((res) => {
        tableData.value = res.data.list;
        queryInfo.total=res.data.total;
      });

    };
    const tableData = ref([]);
    let factory=reactive({factorys:[],factoryNames:{}});
    const getFactorys = ()=>{
      getFactoryInfo({pageSize:1000}).then(res=>{
        let factorys = [];
        res.data?.list.forEach(e=>{
          factorys.push(e);
          factory.factoryNames[e.id]=e;
        })
        factory.factorys = factorys;
      })
    }

    const form = reactive({
      startDateTime: "",
      endDateTime: "",
      cl_cph: "",
      vehicleEmissions: "",
      typeOfAcces: "",
      factory_id:"",
    });
    // 重置
    const onReset = () => {
      form.startDateTime = "";
      form.endDateTime = "";
      form.cl_cph = "";
      form.vehicleEmissions = "";
      form.typeOfAcces = "";
      form.factory_id = "";
      queryInfo.pagenum = 1;
      queryInfo.pagesize = 10
      selectQuery()
    };
    let table = reactive({
      rows: [],
      total: 0,
    });
    // const exportExcel = () => {
    //   const data = XLSX.utils.json_to_sheet(tableData.value); //此处tableData.value为表格的数据
    //   const wb = XLSX.utils.book_new();
    //   XLSX.utils.book_append_sheet(wb, data, "test-data"); //test-data为自定义的sheet表名
    //   XLSX.writeFile(wb, "车辆进出台账.xlsx"); //test.xlsx为自定义的文件名
    // };
    //导出工序(中文)
    const exportExcelData = (form) => {
      ElMessageBox.confirm("确定要导出吗?").then(()=>{
        vehicleAccListOut(form).then((res)=>{
          if (res.data.list.length == 0){
            ElMessage.error("未查询到数据")
          }else {
            out.value = res.data.list
            exportExcel()
          }
          // out.value = res.data.list
          // exportExcel()
        })
      })
    }
    const out = ref()
    const exportExcel = () => {

        let exportData = []
        //导出数据结构构造
        out.value.forEach(item => {
          if(item.applicationTime){
            item.applicationTime = moment(item.applicationTime).format('YYYY-MM-DD hh:mm:ss')
          }else {
            item.applicationTime = ''
          }
          item.factory_id = factory.factoryNames[item.factory_id]?.factory_name
          item.filingStatus = item.filingStatus == '0'?'未备案':'已备案'
          // item.filing_happens = item.filing_happens == '0'?'临时':'备案'
          item.standard = item.standard == '0'?'未达标':'已达标'
          item.openingwhether = item.openingwhether == '0'?'否':'是'
          exportData.push({
            factory_id: item. factory_id? item.factory_id:'',
            filingStatus: item.filingStatus ? item.filingStatus : '',
            typeOfAcces: item.typeOfAcces ? item.typeOfAcces : '',
            openingwhether: item.openingwhether ? item.openingwhether : '',
            standard: item.standard ? item.standard : '',
            gateno: item.gateno ? item.gateno : '',
            cl_cph: item.cl_cph ? item.cl_cph : '',
            licensePlateColor: item.licensePlateColor ? item.licensePlateColor : '',
            vehicleEmissions: item.vehicleEmissions ? item.vehicleEmissions : '',
            sj_name: item.sj_name ? item.sj_name : '',
            sj_phone: item.sj_phone ? item.sj_phone : '',
            applicationTime: item.applicationTime ? item.applicationTime : '',
            viewvideo: item.viewvideo ? item.viewvideo : '',
            viewphotos: item.viewphotos ? item.viewphotos : ''
          })
        })
        //导出表头设计
        let head = {
          factory_id:'工厂',
          filingStatus:'状态1已备案0未备案',
          typeOfAcces: '出入类型',
          openingwhether: '是否开闸',
          standard: '是否达标',
          gateno: '道闸编号',
          cl_cph: '车牌号',
          licensePlateColor:'车牌颜色',
          vehicleEmissions:'排放阶段',
          sj_name: '司机姓名',
          sj_phone:'司机电话',
          accessTime:'出入时间',
          applicationTime:'申请时间',
          viewvideo:'查看视频',
          viewphotos:'查看图片',
        }
        //表头数据切换
        const list = exportData.map(item => {
          const obj = {}
          for (const k in item) {
            if (head[k]) {
              obj[head[k]] = item[k]
            }
          }
          return obj
        })
        // 创建工作表
        const data = XLSX.utils.json_to_sheet(list)
        // 创建工作簿
        const wb = XLSX.utils.book_new()
        // 将工作表放入工作簿中
        XLSX.utils.book_append_sheet(wb, data, 'data')
        // 生成文件并下载
        XLSX.writeFile(wb, '后端执行日志.xlsx')

    }

    //查看视频
    const videoDialog = ref(false)
    const videos = ref("");
    const lookup = (row) =>{
      let index = row.id%3
      switch(index){
        case 0 : videos.value = first; break;
        case 1 : videos.value = second; break;
        case 2 : videos.value = third; break;
        default: videos.value = null;
      }
      videoDialog.value = true;
    }
    //车辆照片显示图片
    const Image = reactive({
      viewphotos:""
    })
    const vehiclePhotoDia = ref(false);
    const vehiclelist = (row) => {
      // vehiclePhotoDia.value = true;
      Image.viewphotos = row.viewphotos;
      v3ImgPreviewFn(Image.viewphotos)
    };
    return {
      factory,
      getFactorys,
      exportExcelData,
      queryInfo,
      handleCurrentChange,
      handleSizeChange,
      form,
      lookup,
      videoDialog,
      videos,
      tableData,
      exportExcel,
      table,
      detailPage,
      select,
      selectQuery,
      onReset,vehiclePhotoDia,
      vehiclelist,
      Image,
      factory_id

    };
  },
};
</script>
<style scoped>
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}

.add-but {
  background: #dde5fe;
  color: #3780b9;
}
/* 分页 */

.demo-pagination-block {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.photoImg{
  width:100%
}
</style>
